<!-- 详情 -->
<template>
  <div class="drawer-layoutss">
    <el-drawer
      :title="detailTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="85%"
      :wrapperClosable="false"
    >
      <div class="layout" style="position: relative" v-loading="loading">
        <el-form
          label-position="left"
          :inline="true"
          size="small"
          :model="recruitingFrom"
          :rules="recruitingRules"
          ref="recruiting"
        >
          <el-tabs v-model="activeName">
            <el-tab-pane label="活动基本配置" name="first">
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item
                  label="活动名称"
                  prop="activity_name"
                  class="form-box-item"
                >
                  <el-input
                    clearable
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入活动名称"
                    v-model="recruitingFrom.activity_name"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="活动时间"
                  prop="recruitingTime"
                  class="form-box-item"
                >
                  <el-date-picker
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="recruitingTimeChange"
                    v-model="recruitingTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="请选择开始时间"
                    end-placeholder="请选择结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="生效区域"
                  prop="user_area"
                  class="form-box-item"
                >
                  <el-cascader
                    filterable
                    v-model="recruitingFrom.user_area"
                    style="width: 100%"
                    :options="regionList"
                    collapse-tags
                    :props="{
                      expandTrigger: 'hover',
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: false,
                      emitPath: false,
                    }"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="basic_information('basic', 'third')"
                  class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="新用户奖励" name="third">
              <div class="blockquote-box">活动规则</div>
              <div class="form-box">
                <el-form-item
                  label="奖励任务"
                  prop="task_rewards"
                  class="form-box-item"
                >
                  <el-checkbox-group
                    @change="task_rewardshange"
                    v-model="task_rewards"
                    size="small"
                  >
                    <el-checkbox
                      label="注册奖励"
                      name="extraTimes"
                    ></el-checkbox>
                    <el-checkbox
                      label="完成实名认证"
                      name="extraTimes"
                    ></el-checkbox>
                    <el-checkbox
                      label="消费奖励"
                      name="extraTimes"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
              <div class="form-box">
                <!-- <el-form-item
                  label="奖励对象"
                  prop="inviter_rewards"
                  class="form-box-item"
                >
                  <el-checkbox-group
                    @change="inviterRewardsChange"
                    v-model="inviter_rewards"
                    size="small"
                  >
                    <el-checkbox
                      label="邀请人奖励"
                      name="rewardObject"
                    ></el-checkbox>
                    <el-checkbox
                      label="被邀请人奖励"
                      name="rewardObject"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item> -->
                <div>
                  <el-form-item prop="validity_period" class="form-box-item">
                    积分转化卡领取后
                    <el-input
                      @focus="FocusRow"
                      @blur="BlurRow"
                      placeholder="天数"
                      v-model="validity_period"
                      style="width: 80px"
                    ></el-input>
                    内有效
                    <span style="font-size: 12px; color: #a3a3a3">
                      &nbsp;&nbsp;输入0或不填为永久有效
                    </span>
                  </el-form-item>
                </div>
              </div>
              <div v-if="task_rewards.includes('注册奖励')">
                <div class="blockquote-box">注册奖励</div>
                <div class="form-box">
                  <!-- :rules="{
                      required: true,
                      validator: reward_type,
                      trigger: 'change',
                    }"
                    :prop="'register.type'" -->
                  <el-form-item
                    label="奖励类型"
                    class="form-box-item"
                    style="margin-top: 20px"
                  >
                    <el-checkbox-group
                      v-model="recruitingFrom.register.type"
                      size="small"
                    >
                      <el-checkbox :label="1" name="rewardType"
                        >积分</el-checkbox
                      >
                      <el-checkbox :label="2" name="rewardType"
                        >提货券</el-checkbox
                      >
                      <el-checkbox :label="3" name="rewardType"
                        >余额</el-checkbox
                      >
                      <el-checkbox :label="4" name="rewardType"
                        >积分转化卡</el-checkbox
                      >
                      <el-checkbox :label="5" name="rewardType"
                        >优惠券</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                  <div>
                    <el-form-item
                      v-if="recruitingFrom.register.type.includes(1)"
                      label="赠送积分"
                      :prop="'register.available_points'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('register', 'available_points')"
                        @blur="blur('register', 'available_points')"
                        placeholder="请输入赠送积分数量"
                        v-model="recruitingFrom.register.available_points"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="recruitingFrom.register.type.includes(2)"
                      label="赠送提货券"
                      :prop="'register.available_coupons'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('register', 'available_coupons')"
                        @blur="blur('register', 'available_coupons')"
                        placeholder="请输入赠送提货券数量"
                        v-model="recruitingFrom.register.available_coupons"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="recruitingFrom.register.type.includes(3)"
                      label="赠送余额"
                      :prop="'register.available_balance'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('register', 'available_balance')"
                        @blur="blur('register', 'available_balance')"
                        placeholder="请输入赠送余额"
                        v-model="recruitingFrom.register.available_balance"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="recruitingFrom.register.type.includes(4)"
                      label="积分转化率"
                      :prop="'register.integral_card'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('register', 'integral_card')"
                        @blur="blur('register', 'integral_card')"
                        placeholder="请输入百分比"
                        v-model="recruitingFrom.register.integral_card"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      required
                      v-if="recruitingFrom.register.type.includes(5)"
                      label="赠送优惠券"
                      class="form-box-item"
                    >
                      <el-input
                        v-model="recruitingFrom.register.couponName"
                        placeholder="请选择优惠券"
                        :disabled="true"
                      >
                      </el-input>
                      <el-button
                        type="primary"
                        @click="addConfig('选择优惠券')"
                        style="margin-left: 20px"
                        >选择优惠券</el-button
                      >
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="task_rewards.includes('完成实名认证')">
                <div class="blockquote-box">实名认证奖励</div>
                <div class="form-box">
                  <!-- :prop="'real.type'"
                    class="form-box-item"
                    :rules="{
                      required: true,
                      validator: reward_type,
                      trigger: 'change',
                    }" -->
                  <el-form-item label="奖励类型" style="margin-top: 20px">
                    <el-checkbox-group
                      v-model="recruitingFrom.real.type"
                      size="small"
                    >
                      <el-checkbox :label="1" name="rewardType"
                        >积分</el-checkbox
                      >
                      <el-checkbox :label="2" name="rewardType"
                        >提货券</el-checkbox
                      >
                      <el-checkbox :label="3" name="rewardType"
                        >余额</el-checkbox
                      >
                      <el-checkbox :label="4" name="rewardType"
                        >积分转化卡</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                  <div>
                    <el-form-item
                      v-if="recruitingFrom.real.type.includes(1)"
                      label="赠送积分"
                      :prop="'real.available_points'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('real', 'available_points')"
                        @blur="blur('real', 'available_points')"
                        placeholder="请输入赠送积分数量"
                        v-model="recruitingFrom.real.available_points"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="recruitingFrom.real.type.includes(2)"
                      label="赠送提货券"
                      :prop="'real.available_coupons'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('real', 'available_coupons')"
                        @blur="blur('real', 'available_coupons')"
                        placeholder="请输入赠送提货券数量"
                        v-model="recruitingFrom.real.available_coupons"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="recruitingFrom.real.type.includes(3)"
                      label="赠送余额"
                      :prop="'real.available_balance'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('real', 'available_balance')"
                        @blur="blur('real', 'available_balance')"
                        placeholder="请输入赠送余额"
                        v-model="recruitingFrom.real.available_balance"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item
                      v-if="recruitingFrom.real.type.includes(4)"
                      label="积分转化率"
                      :prop="'real.integral_card'"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      class="form-box-item"
                    >
                      <el-input
                        @focus="focus('real', 'integral_card')"
                        @blur="blur('real', 'integral_card')"
                        placeholder="请输入百分比"
                        v-model="recruitingFrom.real.integral_card"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>

              <div v-if="task_rewards.includes('消费奖励')">
                <div class="blockquote-box">消费奖励</div>
                <div class="form-box">
                  <el-form-item label="配置条件" class="form-box-item">
                    <el-button
                      type="primary"
                      style="height: 30px"
                      @click="addProductConfig('配置奖池商品')"
                      >配置指定商品({{
                        this.reward_task_goods_ids.length
                      }})</el-button
                    >
                  </el-form-item>
                  <!-- <div>
                    <el-form-item
                      label="邀请奖励发放节点"
                      required
                      class="orm-box-item"
                    >
                      <el-radio-group v-model="eventsForm.node">
                        <el-radio label="1">支付完成发放</el-radio>
                        <el-radio label="2">超过售后期发放</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      label="被邀请奖励发放节点"
                      required
                      class="form-box-item"
                    >
                      <el-radio-group v-model="eventsForm.node">
                        <el-radio label="1">支付完成发放</el-radio>
                        <el-radio label="2">超过售后期发放</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div> -->

                  <div
                    class="order-box"
                    v-for="(order, index) in recruitingFrom.consume.rule"
                    :key="order.id + 'consumption_rewards'"
                  >
                    <el-form-item
                      label="消费订单"
                      required
                      class="numbox form-box-item"
                    >
                      <el-radio-group
                        v-model="order.order_type"
                        @click="order_typeChange(order)"
                      >
                        <el-radio :label="1">固定单数</el-radio>
                        <el-radio :label="2">订单区间</el-radio>
                      </el-radio-group>
                      <div style="margin-left: 30px">
                        第
                        <el-input-number
                          v-model="order.order_start"
                          :prop="'consume.rule.' + index + '.order_start'"
                          controls-position="right"
                          :min="elInputNumberMin(order, index)"
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        <span
                          v-if="order.order_type == 1"
                          style="margin-left: 5px"
                          >单</span
                        >
                        <span v-else style="margin-left: 30px">- </span>
                      </div>
                      <div
                        style="margin-left: 30px"
                        v-if="order.order_type == 2"
                      >
                        <el-input-number
                          v-model="order.order_end"
                          :prop="'consume.rule.' + index + '.order_end'"
                          controls-position="right"
                          :min="order.order_start + 1"
                          @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "
                        ></el-input-number>
                        单
                      </div>
                      <div
                        style="margin-left: 50px"
                        v-if="index == recruitingFrom.consume.rule.length - 1"
                      >
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="addOrder"
                        ></el-button>
                        <el-button
                          icon="el-icon-minus"
                          circle
                          @click="removeOrder(order)"
                          v-if="index !== 0"
                        ></el-button>
                      </div>
                    </el-form-item>
                    <div class="form-box">
                      <!--                         :prop="'consume.rule.' + index + '.type'"
                        :rules="{
                          required: true,
                          validator: reward_type,
                          trigger: 'change',
                        }" -->
                      <el-form-item
                        label="奖励类型"
                        class="form-box-item"
                        style="margin-top: 20px"
                      >
                        <el-checkbox-group v-model="order.type" size="small">
                          <el-checkbox :label="1" name="积分">积分</el-checkbox>
                          <el-checkbox :label="2" name="提货券"
                            >提货券</el-checkbox
                          >
                          <el-checkbox :label="3" name="余额">余额</el-checkbox>
                          <el-checkbox :label="4" name="积分转化卡"
                            >积分转化卡</el-checkbox
                          >
                        </el-checkbox-group>
                      </el-form-item>
                      <div>
                        <el-form-item
                          v-if="order.type.includes(1)"
                          label="赠送积分"
                          :prop="'consume.rule.' + index + '.available_points'"
                          :rules="{
                            required: true,
                            validator: quantity,
                            trigger: 'change',
                          }"
                          class="form-box-item"
                        >
                          <el-input
                            @focus="focusConsume(index, 'available_points')"
                            @blur="blurConsume(index, 'available_points')"
                            placeholder="请输入赠送积分数量"
                            v-model="order.available_points"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="order.type.includes(2)"
                          label="赠送提货券"
                          :prop="'consume.rule.' + index + '.available_coupons'"
                          :rules="{
                            required: true,
                            validator: quantity,
                            trigger: 'change',
                          }"
                          class="form-box-item"
                        >
                          <el-input
                            @focus="focusConsume(index, 'available_coupons')"
                            @blur="blurConsume(index, 'available_coupons')"
                            placeholder="请输入赠送提货券数量"
                            v-model="order.available_coupons"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="order.type.includes(3)"
                          label="赠送余额"
                          :prop="'consume.rule.' + index + '.available_balance'"
                          :rules="{
                            required: true,
                            validator: quantity,
                            trigger: 'change',
                          }"
                          class="form-box-item"
                        >
                          <el-input
                            @focus="focusConsume(index, 'available_balance')"
                            @blur="blurConsume(index, 'available_balance')"
                            placeholder="请输入赠送余额"
                            v-model="order.available_balance"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="order.type.includes(4)"
                          label="消费转化比"
                          :prop="'consume.rule.' + index + '.integral_card'"
                          :rules="{
                            required: true,
                            validator: quantity,
                            trigger: 'change',
                          }"
                          class="form-box-item"
                        >
                          <el-input
                            @focus="focusConsume(index, 'integral_card')"
                            @blur="blurConsume(index, 'integral_card')"
                            placeholder="请输入百分比"
                            v-model="order.integral_card"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="activeName = 'basic'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button @click="activeName = 'fourth'" class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动说明" name="fourth">
              <div class="blockquote-box">活动简介&规则说明</div>
              <div class="form-box">
                <el-form-item
                  label="活动简介"
                  prop="explain"
                  class="form-box-item"
                >
                  <el-input
                    type="textarea"
                    style="width: 727px"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="recruitingFrom.explain"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="规则说明"
                  prop="rule_explain"
                  class="form-box-item"
                >
                  <editor-text
                    v-model="recruitingFrom.rule_explain"
                    :height="240"
                    @input="editorclick"
                  />
                </el-form-item>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button
                  @click="activeName = 'third'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button class="next-button" @click="saveSubmit"
                  >保存</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </el-drawer>
    <!-- 配置抽屉 -->
    <!-- <config

      v-if="ifShowConfig"
      :userIds="userIds"
      :regionList="regionList"
      :groupingList="groupingList"
      :TagCategoryAll="TagCategoryAll"
      :gradeList="gradeList"
      :ConfigTitle="ConfigTitle"
    /> -->
    <config ref="config" v-if="ifShowConfig" :ConfigTitle="ConfigTitle" />
    <productConfig
      v-if="ifShowProductConfig"
      :goodsType="goodsType"
      :goodsIdArr="reward_task_goods_ids"
      :goodsIdsRowList="reward_task_goods_ids_row"
      :configuration="{
        total_num: total_num,
        gif_num: gif_num,
      }"
      :productConfigTitle="productConfigTitle"
    ></productConfig>
  </div>
</template>
<script>
// 引入
import config from "./config";
import productConfig from "./productConfig";
import LogoUpload from "@/components/FileUpload";

import { rangeCanJoinUserList, rangeHasJoinUserList } from "@/api/index";
import { SaveNewPeopleGif, getNewPeopleGifInfo } from "@/api/activity/index";
export default {
  name: "detail",
  props: [
    "detailTitle",
    "regionList",
    "gradeList",
    "TagCategoryAll",
    "groupingList",
  ],
  components: {
    config,
    productConfig,
    LogoUpload,
  },

  data() {
    return {
      id: "",
      drawer: true,
      detailtitle: "",
      rule_explainBool: false,
      activeName: "first",
      recruitingFrom: {
        activity_name: "", // 活动名称
        start_time: "", // 开始时间（立即生效请传空字符串） 2023-10-11 13:00:00
        end_time: "", // 结束时间 （永久有效请传空字符串）2023-10-11 13:00:00
        status: 2, // 状态:-1结束 1开启 2关闭 3进行中
        sort: "", // 排序默认：0
        poster: "", // 活动图片
        description: "", //活动简介
        explain: "", // 活动说明
        rule_explain: "",
        user_area: [], // 生效区域
        appoint_area_select_json: [],
        appoint_area_select: [],
        appoint_level_select: [],
        appoint_group_select: [],
        appoint_tag_select: [],
        user_black: [],
        reward_from_open: "", // 邀请人奖励：1=开启；0=关闭
        reward_to_open: "", // 被邀请人奖励：1=开启；0=关闭
        reward_task_register_open: "", // 注册任务奖励：1=开启；0=关闭
        reward_task_auth_open: "", // 实名认证任务奖励：1=开启；0=关闭
        reward_task_consume_open: "", // 消费任务奖励：1=开启；0=关闭
        reward_task_goods_ids: "", // 任务商品，指定的商品可以参与活动，多个商品以,分开。（任务消费有此参数）
        register: {
          // 注册奖励
          type: [], // 注册奖励类型1=积分2=提货劵3=余额4=积分转化卡5=优惠券
          available_points: 0,
          available_coupons: 0,
          available_balance: 0,
          integral_card: 0,
          coupon: "",
          couponName: "",
        },
        real: {
          // 实名认证奖励
          type: [], // 实名认证奖励类型1=积分2=提货劵3=余额4=积分转化卡5=优惠券
          available_points: 0,
          available_coupons: 0,
          available_balance: 0,
          integral_card: 0,
        },
        consume: {
          //消费奖励
          goodIds: "",
          rule: [
            {
              id: 0,
              order_type: 1,
              order_start: null,
              order_end: null,
              type: [],
              available_points: 0,
              available_coupons: 0,
              available_balance: 0,
              integral_card: 0,
            },
          ],
        },
      },
      recruitingTime: [], // 活动开始结束时间回显
      poster: {}, // 邀请海报回显
      CanJoinUserList: [], // 满足条件的可参与用户列表
      userIds: [], // 所配置的黑名单用户用来动态传参
      dataListConfig: [], //   适用范围传递的数据
      joinblackIds: [], // 黑名单列表
      inviter_rewards: ["邀请人奖励", "被邀请人奖励"], // 邀请人奖励和被邀请人奖励是否开启
      task_rewards: ["注册奖励", "完成实名认证", "消费奖励"],
      validity_period: 0, // 转化卡领取后多少天有效
      reward_task_goods_ids: [], // 任务商品数组
      reward_task_goods_ids_row: [], // 任务商品数组
      total_num: 0,
      gif_num: 0,
      goodsType: "全部",
      recruitingRules: {
        activity_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        recruitingTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.recruitingTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        task_rewards: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.task_rewards.length == 0) {
                return callback(new Error("请选择奖励任务"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        inviter_rewards: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.inviter_rewards.length == 0) {
                return callback(new Error("请选择奖励对象"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        validity_period: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (this.validity_period == "" || this.validity_period == 0) {
                return callback();
              }
              if (req.test(this.validity_period)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        explain: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "") {
                callback(new Error("请输入活动简介"));
                return;
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        rule_explain: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "") {
                callback(new Error("请输入规则说明"));
                return;
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },

      reward_type: (rule, value, callback) => {
        if (value.length == 0) {
          return callback(new Error("请选择奖励类型"));
        } else {
          callback();
        }
      },
      quantity: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入内容"));
        } else {
          let req = /^\d+(\.\d{1,2})?$/;

          if (req.test(value)) {
            if (rule.field.search("integral_card") !== -1) {
              if (Number(value) > 100) {
                callback(new Error("转化率比例不能大于100"));
              } else if (Number(value) < 0) {
                callback(new Error("转化率比例不能小于1"));
              } else {
                callback();
              }
            } else {
              callback();
            }
          } else {
            callback(new Error("只能输入数字,且只能保留两位小数"));
          }
        }
      },
      // 校验
      rangerules: {},
      rangeCanJoinUserSearch: {
        activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
        remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
        appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
        appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
        appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
        appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
        user_black: "", // 黑名单用户ID（多个以,分开）
        page: 1,
        count: 10,
      }, //
      rangeCanJoinUserLoading: false, // 使用范围使用用户列表
      rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
      joinblackList: [], // 黑名单列表
      HasJoinUserList: [], // 重复用户列表
      rangeHasJoinUserTotal: 0, // 重复用户数
      loading: false,

      ifShowConfig: false,
      ConfigTitle: "",
      ifShowProductConfig: false,
      productConfigTitle: "",
      dialogFormVisible: false,
      form: {
        name: "",
        image: "",
      },
      images: [],
      dialogtitle: "",
      image: "",
    };
  },
  mounted() {
    const p5 = new Promise((resolve, reject) => {
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
        resolve();
      });
    });
    const p6 = new Promise((resolve, reject) => {
      rangeHasJoinUserList({ activity_type: 10001 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.HasJoinUserList = res.data.list;
        this.rangeHasJoinUserTotal = res.data.total;
        resolve();
      });
    });
    Promise.all([p5, p6])
      .then(() => {
        this.rule_explainBool = true;
      })
      .catch(() => {});
  },
  methods: {
    getAwardInfoWay(row) {
      this.loading = true;
      this.id = row.id;
      getNewPeopleGifInfo({ id: this.id }).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        let objRes = res.data;
        this.recruitingFrom.activity_name = objRes.activity_name;
        this.recruitingTime = [objRes.start_time, objRes.end_time];
        this.recruitingTimeChange(this.recruitingTime);
        this.recruitingFrom.user_area = objRes.userConfig.user_area
          .split(",")
          .map(Number);
        this.recruitingFrom.explain = objRes.explain.explain;
        this.recruitingFrom.rule_explain = objRes.explain.rule_explain;
        let award_type = objRes.newPeople.award_type.split(",").map(Number);
        if (award_type.includes(1)) {
          this.task_rewards.push("注册奖励");
        }
        if (award_type.includes(1)) {
          this.task_rewards.push("完成实名认证");
        }
        if (award_type.includes(1)) {
          this.task_rewards.push("消费奖励");
        }
        this.validity_period = objRes.newPeople.due_day;
        this.recruitingFrom.new_people_id = objRes.newPeople.id;
        this.recruitingFrom.register.type = objRes.newPeople.register_json.type
          .split(",")
          .map(Number);
        this.recruitingFrom.register.available_balance =
          objRes.newPeople.register_json.available_balance;
        this.recruitingFrom.register.available_coupons =
          objRes.newPeople.register_json.available_coupons;
        this.recruitingFrom.register.available_points =
          objRes.newPeople.register_json.available_points;
        this.recruitingFrom.register.coupon =
          objRes.newPeople.register_json.coupon;
        this.recruitingFrom.register.integral_card =
          objRes.newPeople.register_json.integral_card;
        this.recruitingFrom.register.couponName =
          objRes.newPeople.register_json.coupon_name;

        this.recruitingFrom.real.type = objRes.newPeople.real_json.type
          .split(",")
          .map(Number);
        this.recruitingFrom.real.available_balance =
          objRes.newPeople.real_json.available_balance;
        this.recruitingFrom.real.available_coupons =
          objRes.newPeople.real_json.available_coupons;
        this.recruitingFrom.real.available_points =
          objRes.newPeople.real_json.available_points;
        this.recruitingFrom.real.coupon = objRes.newPeople.real_json.coupon;
        this.recruitingFrom.real.integral_card =
          objRes.newPeople.real_json.integral_card;

        this.reward_task_goods_ids = objRes.newPeople.consume_json.goodIds
          .split(",")
          .map(Number);

        objRes.newPeople.consume_json.rule.forEach((item, index) => {
          item.type = item.type.split(",").map(Number);
          item.id = index;
        });
        this.recruitingFrom.consume.rule = objRes.newPeople.consume_json.rule;
      });
    },
    // 基本信息点击下一步调用
    basic_information(formName, activeName) {
      this.activeName = activeName;
    },
    // 获取可参与用户列表
    getRangeCanJoinUserListWay() {
      this.rangeCanJoinUserLoading = true;
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        this.rangeCanJoinUserLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
      });
    },
    //打开抽屉
    addConfig(title) {
      this.ifShowConfig = true;
      this.ConfigTitle = title;
      if (this.recruitingFrom.register.coupon) {
        this.$nextTick(() => {
          this.$refs.config.getListWay(this.recruitingFrom.register.coupon);
        });
      }
      // });
    },
    //加入黑名单
    joinblack(row) {
      this.$confirm("确定要将该用户添加到黑名单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.length !== 0) {
            row.forEach((item) => {
              this.joinblackIds.push(item.id);
            });
          }
          this.rangeCanJoinUserSearch.user_black = this.joinblackIds.toString();
          this.getRangeCanJoinUserListWay();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.userIds = this.joinblackIds;

          this.$refs.config.getList(this.joinblackIds);
        })
        .catch(() => {});
    },
    // 移除黑名单
    removeBlacklist(row) {
      var _this = this;
      _this
        .$confirm("确定要将用户移出黑名单吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          var arr = [];
          if (row.length !== 0) {
            row.forEach((item) => {
              arr.push(item.id);
            });
          } else {
            arr = [];
          }
          _this.joinblackIds = _this.getArrDifference(arr, _this.joinblackIds);
          _this.rangeCanJoinUserSearch.user_black =
            _this.joinblackIds.toString();
          _this.getRangeCanJoinUserListWay();
          _this.$message({
            type: "success",
            message: "移出成功!",
          });
          _this.userIds = _this.joinblackIds;
          _this.$refs.config.getList(_this.userIds);
        })
        .catch(() => {});
    },
    // 数组排除重复的
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    // 下拉框选择调用
    selectChangeWay(name) {
      if (name == "appoint_group_select") {
        this.rangeCanJoinUserSearch.appoint_group_select =
          this.recruitingFrom[name].toString();
      } else if (name == "appoint_level_select") {
        this.rangeCanJoinUserSearch.appoint_level_select =
          this.recruitingFrom[name].toString();
      } else if (name == "appoint_tag_select") {
        this.rangeCanJoinUserSearch.appoint_tag_select =
          this.recruitingFrom[name].toString();
      }
      this.getRangeCanJoinUserListWay();
    },
    // 选择区域调用
    regionChangeWay(val) {
      console.log(val);
      var arr = [];
      val.forEach((item) => {
        arr.push(item[1]);
      });
      this.recruitingFrom.appoint_area_select_json = val;
      this.rangeCanJoinUserSearch.appoint_area_select = arr.toString();
      this.recruitingFrom.appoint_area_select = arr.toString();
      this.getRangeCanJoinUserListWay();
    },
    // 任务奖励切换
    task_rewardshange(val) {
      if (val.includes("注册奖励")) {
        this.recruitingFrom.reward_task_register_open = 1;
      } else {
        this.recruitingFrom.reward_task_register_open = 0;
      }
      if (val.includes("完成实名认证")) {
        this.recruitingFrom.reward_task_auth_open = 1;
      } else {
        this.recruitingFrom.reward_task_auth_open = 0;
      }
      if (val.includes("消费奖励")) {
        this.recruitingFrom.reward_task_consume_open = 0;
      } else {
        this.recruitingFrom.reward_task_consume_open = 0;
      }
    },
    // 选择邀请人奖励调用
    inviterRewardsChange(val) {
      if (val.includes("邀请人奖励")) {
        this.recruitingFrom.reward_from_open = 1;
      } else {
        this.recruitingFrom.reward_from_open = 0;
      }
      if (val.includes("被邀请人奖励")) {
        this.recruitingFrom.reward_to_open = 0;
      } else {
        this.recruitingFrom.reward_to_open = 0;
      }
    },
    // 文本框聚焦执行
    Focus(item, str) {
      if (item[str] == 0) {
        item[str] = "";
      }
      this.$forceUpdate();
    },
    // 文本框聚焦执行
    FocusRow() {
      if (this.validity_period == 0) {
        this.validity_period = "";
      }
      this.$forceUpdate();
    },
    focus(secondary, threeLevel) {
      if (this.recruitingFrom[secondary][threeLevel] == 0) {
        this.recruitingFrom[secondary][threeLevel] = "";
      }
      this.$forceUpdate();
    },
    blur(secondary, threeLevel) {
      if (this.recruitingFrom[secondary][threeLevel] == "") {
        this.recruitingFrom[secondary][threeLevel] = 0;
      }
      this.$forceUpdate();
    },
    focusConsume(index, name) {
      if (this.recruitingFrom.consume.rule[index][name] == 0) {
        this.recruitingFrom.consume.rule[index][name] = "";
      }
    },
    blurConsume(index, name) {
      if (this.recruitingFrom.consume.rule[index][name] == "") {
        this.recruitingFrom.consume.rule[index][name] = 0;
      }
    },
    // 文本框失焦执行
    Blur(item, str) {
      if (item[str] == "") {
        item[str] = 0;
        return;
      }
      if (Number(item[str])) {
        item[str] = Number(item[str]);
      }
      this.$forceUpdate();
    },
    // 文本框失焦执行
    BlurRow() {
      if (this.validity_period == "") {
        this.validity_period = 0;
        return;
      }
      if (Number(this.validity_period)) {
        this.validity_period = Number(this.validity_period);
      }
      this.$forceUpdate();
    },
    // 关闭抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },

    addProductConfig(title) {
      this.productConfigTitle = title;
      this.ifShowProductConfig = true;
    },
    //关闭子抽屉
    closeConfig(id, name) {
      if (id) {
        this.recruitingFrom.register.coupon = id;
        this.recruitingFrom.register.couponName = name;
      }
      this.ifShowProductConfig = false;
      this.ifShowConfig = false;
    },

    //增加消费订单
    addOrder() {
      this.recruitingFrom.consume.rule.push({
        id: this.recruitingFrom.consume.rule.length + new Date().getTime(),
        order_type: 1,
        order_start: null,
        order_end: null,
        type: [],
        available_points: 0,
        available_coupons: 0,
        available_balance: 0,
        integral_card: 0,
      });
    },
    //移除消费订单
    removeOrder(item) {
      var index = this.recruitingFrom.consume.rule.indexOf(item);
      if (index !== -1) {
        this.recruitingFrom.consume.rule.splice(index, 1);
      }
    },
    order_typeChange(order) {
      if (order.order_type == 1) {
        order.order_end = order.order_start;
      }
    },
    //订单数值改变
    numChange(currentValue, oldValue, order, index) {
      if (order.order_type == 1) {
        order.range_num_max = order.range_num_min;
      }
    },
    // 选择时间回调
    recruitingTimeChange(val) {
      this.recruitingFrom.start_time = val[0];
      this.recruitingFrom.end_time = val[1];
    },
    // 上传邀请海报回调
    posterBack(file) {
      this.poster = file;
      this.recruitingFrom.poster = file.url;
    },
    // 富文本回调
    editorclick(e) {
      this.recruitingFrom.rule_explain = e;
    },
    // 最小值
    elInputNumberMin(item, index) {
      if (index == 0) {
        return 1;
      }
      if (this.recruitingFrom.consume.rule[index - 1].order_type == 1) {
        return Number(
          this.recruitingFrom.consume.rule[index - 1].order_start + 1
        );
      } else {
        return Number(
          this.recruitingFrom.consume.rule[index - 1].order_end + 1
        );
      }
    },
    // 奖池商品
    addwardIdsRowWay(row) {
      this.reward_task_goods_ids_row = row;
    },
    // 奖池商品
    addwardIdsWay(row) {
      this.reward_task_goods_ids = row;
    },
    // 保存活动信息
    saveSubmit() {
      this.$refs.recruiting.validate((valid, error) => {
        if (valid) {
          let objForm = JSON.parse(JSON.stringify(this.recruitingFrom));
          let obj = {};
          obj.activity_name = objForm.activity_name;
          obj.start_time = objForm.start_time;
          obj.end_time = objForm.end_time;
          obj.user_area = objForm.user_area;
          obj.explain = objForm.explain;
          obj.rule_explain = objForm.rule_explain;
          obj.new_people_id = objForm.new_people_id ? objForm.new_people_id : 0;
          obj.award_type = [];
          obj.due_day = this.validity_period;
          obj.register = objForm.register;
          obj.register.type = objForm.register.type.toString();
          obj.register.available_balance = Number(
            objForm.register.available_balance
          );
          obj.register.available_coupons = Number(
            objForm.register.available_coupons
          );
          obj.register.available_points = Number(
            objForm.register.available_points
          );
          obj.real = objForm.real;
          obj.real.type = objForm.real.type.toString();
          obj.real.available_points = Number(objForm.real.available_points);
          obj.real.available_coupons = Number(objForm.real.available_coupons);
          obj.real.available_balance = Number(objForm.real.available_balance);
          obj.real.integral_card = Number(objForm.real.integral_card);
          obj.consume = objForm.consume;
          obj.consume.goodIds = this.reward_task_goods_ids.toString();
          obj.consume.rule.forEach((item) => {
            item.type = item.type.toString();
            item.integral_card = Number(item.integral_card);
            item.available_balance = Number(item.available_balance);
            item.available_coupons = Number(item.available_coupons);
            item.available_points = Number(item.available_points);
            item.order_end =
              item.order_type == 1 ? item.order_start : item.order_end;
          });
          if (this.task_rewards.includes("注册奖励")) {
            obj.award_type.push(1);
          }
          if (this.task_rewards.includes("完成实名认证")) {
            obj.award_type.push(2);
          }
          if (this.task_rewards.includes("消费奖励")) {
            obj.award_type.push(3);
          }

          this.$nextTick(() => {
            if (this.id) {
              obj.id = this.id;
            }
            obj.award_type = obj.award_type.toString();
            this.loading = true;
            SaveNewPeopleGif(obj).then((res) => {
              this.loading = false;
              if (res.code !== 200 || res.status !== 1) {
                this.$messages.error(res.msg);
                return;
              }
              this.$messages.success(res.msg);
              this.closedinvitation();
            });
          });
        } else {
          for (var key in error) {
            this.$messages.error(error[key][0].message);
            break;
          }
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.drawer-layoutss {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    /*height: calc(100vh - 110px); */
    /* overflow-y: auto; */
  }

  // .el-tab-pane {
  //   height: calc(100vh - 110px);
  //   overflow-y: auto;
  // }

  //tabs
  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .order-box {
    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f4f4f4;
      z-index: 1;
    }
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }
  }

  .numbox {
    .el-form-item__content {
      display: -webkit-inline-box;
    }

    .el-input {
      width: 130px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.form-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .form-product {
      display: flex;
      font-size: 12px;
      color: #ee3737;
    }

    .Instructions {
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px;
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;
      line-height: 30px;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }

  .placard-box {
    .placard-title {
      font-size: 14px;
      color: #4893ff;
      width: 200px;
      text-align: center;
      margin-bottom: 10px;
    }

    .placard-tip {
      margin-top: 10px;
      width: 350px;
      color: #6c6c6c;
      line-height: 20px;
      font-size: 12px;
    }
  }

  .order-box {
    background: #f4f4f4;
    padding: 20px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}

.Instructions-important {
  color: #ee3737;
  font-weight: bold;
}
</style>
